<template>
  <div class="panel_h">
    <el-form
      :model="form"
      :rules="rules"
      ref="ruleForm"
      label-width="170px"
      label-position="left"
    >
      <div class="flexrowbetween pt_10 borderb mt_20">
        <div class="c_000">次数设置</div>
        <div class="c_primary commhover" v-if="sqtype" @click="handleSq(1, 0)">
          收起 <i class="el-icon-caret-top f-18"></i>
        </div>
        <div class="c_primary commhover" v-else @click="handleSq(1, 1)">
          展开 <i class="el-icon-caret-bottom f-18"></i>
        </div>
      </div>
      <div class="pl_20 pt_20" v-if="sqtype">
        <el-form-item label="抽奖门槛：" prop="game_limit_num">
          活动成绩达到
          <el-input style="width:100px"
            placeholder=""
            v-model="form.game_limit_num"
            oninput="if(value > 100) value = 100; if(value < 0 || value == '' || value == null) value = 0;"
            :maxlength="3"
            :minlength="1"
          /> 分，即为挑战成功可抽奖
        </el-form-item>
        <el-form-item label="每人抽奖总次数：" prop="all_num">
          <!-- @focus="focus"
            @blur="changeInput"
            @input="handlerChange" -->
          <el-input
            placeholder="每人抽奖总次数"
            v-model="form.all_num"
            oninput="if(value > 100) value = 100; if(value < 0 || value == '' || value == null) value = 0;"
            :maxlength="3"
            :minlength="1"
          />
        </el-form-item>
        <el-form-item label="每人每天抽奖次数：" prop="day_num">
          <el-input
            placeholder="每人每天抽奖次数"
            v-model="form.day_num"
            oninput="if(value > 100) value = 100; if(value < 0 || value == '' || value == null) value = 0;"
            :maxlength="3"
            :minlength="1"
          />
        </el-form-item>
        <el-form-item label="每人中奖次数：" prop="win_num">
          <el-input
            placeholder="每人中奖次数"
            v-model="form.win_num"
            type="number"
            oninput="if(value > 100) value = 100; if(value < 0 || value == '' || value == null) value = 0;"
            :maxlength="3"
            :minlength="1"
          />
        </el-form-item>
        <el-form-item label="每人每项中奖次数：" prop="one_win_num">
          <el-input
            placeholder="每人每项中奖次数"
            v-model="form.one_win_num"
            oninput="if(value > 100) value = 100; if(value < 0 || value == '' || value == null) value = 0;"
            :maxlength="3"
            :minlength="1"
          />
        </el-form-item>
        <el-form-item label="首次登录抽奖次数：" prop="num">
          <el-input
            placeholder="首次登录抽奖次数"
            v-model="form.num"
            oninput="if(value > 100) value = 100; if(value < 0 || value == '' || value == null) value = 0;"
            :maxlength="3"
            :minlength="1"
          />
        </el-form-item>
        <el-form-item label="每人每日抽奖获得次数:" prop="user_day_num">
          <el-input
            :disabled='peoperdisable'
            placeholder="每人每日抽奖获得次数"
            v-model="form.user_day_num"
            oninput="if(value > 100) value = 100; if(value < 0 || value == '' || value == null) value = 0;"
            :maxlength="3"
            :minlength="1"
          />
        </el-form-item>
        <el-form-item label="获得额外机会：" prop="is_task">
          <el-radio-group v-model="form.is_task" @change="save">
            <el-radio
              v-for="(item, index) in statusList"
              :label="item.id"
              :key="index"
              >{{ item.name }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item label="" v-if="form.is_task == 1">
          <div style="padding-left: 26px">
            每人每天转发<el-input readonly
              :value="1"
              type="number"
              size="small"
              :maxlength="5"
              class="plr_9"
              style="width: 100px"
            />
            次可获得<el-input
              v-model="form.forward_num"
              type="number"
              size="small"
              :maxlength="5"
              class="plr_9"
              style="width: 100px"
            />次抽奖机会， 任务上限为<el-input
              v-model="form.forward_limit_num"
              type="number"
              size="small"
              :maxlength="5"
              class="plr_9"
              style="width: 100px"
            />
          </div>
          <div>
            每人每天浏览广告<el-input
              readonly
              :value="1"
              type="number"
              size="small"
              :maxlength="5"
              class="plr_9"
              style="width: 100px"
            />
            次可获得<el-input
              v-model="form.advert_num"
              type="number"
              size="small"
              :maxlength="5"
              class="plr_9"
              min="0"
              max="100"
              style="width: 100px"
            />次抽奖机会， 任务上限为<el-input
              v-model="form.advert_limit_num"
              type="number"
              size="small"
              min="0"
              max="100"
              class="plr_9"
              style="width: 100px"
            />
          </div>
        </el-form-item>
      </div>

      <div class="flexrowbetween pt_10 borderb mt_42">
        <div class="c_000">全局设置</div>
        <div class="c_primary commhover" v-if="sqtype2" @click="handleSq(2, 0)">
          收起 <i class="el-icon-caret-top f-18"></i>
        </div>
        <div class="c_primary commhover" v-else @click="handleSq(2, 1)">
          展开 <i class="el-icon-caret-bottom f-18"></i>
        </div>
      </div>
      <div class="pl_20 pt_20" v-if="sqtype2">
        <el-form-item label="首次抽空概率：">
          <el-input
            placeholder=""
            v-model="form.empty_chance"
            oninput="if(value > 100) value = 100; if(value < 0 || value == '' || value == null) value = 0;"
            :maxlength="3"
            :minlength="1"
            class="pr_10"
            style="width: 120px"
          />
          %
        </el-form-item>
        <el-form-item label="抽奖模式：">
          <el-radio-group v-model="form.type">
            <el-radio :label="2">按人流量发放</el-radio>
            <el-radio :label="1">时间均匀发放</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="总中奖率：" v-if="form.type==2">
          <el-input
            v-model="form.mode_data.chance"
            type="number"
            class="pr_10"
            style="width: 120px"
            :maxlength="5"
          />
          %
        </el-form-item>
        <el-form-item label="奖品分期投放：">
          <el-radio-group v-model="form.mode_data.time">
            <el-radio
              v-for="(item, index) in fqlist"
              :key="index"
              :label="item.id"
              >{{ item.name }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
      </div>
      <!-- 安全设置 -->
      <div class="flexrowbetween pt_10 borderb mt_42">
        <div class="c_000">安全设置</div>
        <div class="c_primary commhover" v-if="sqtype3" @click="handleSq(3, 0)">
          收起 <i class="el-icon-caret-top f-18"></i>
        </div>
        <div class="c_primary commhover" v-else @click="handleSq(3, 1)">
          展开 <i class="el-icon-caret-bottom f-18"></i>
        </div>
      </div>
      <div class="pl_20 pt_20" v-if="sqtype3">
        <el-form-item label="禁止风险用户访问">
          <el-radio-group v-model="form.is_safe">
            <el-radio
              v-for="(item, index) in statusList"
              :key="index"
              :label="item.id"
              >{{ item.name }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item label="限制参与地区">
          <el-radio-group v-model="form.is_limit">
            <el-radio
              v-for="(item, index) in statusList"
              :key="index"
              :label="item.id"
              >{{ item.name }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <template v-if="form.is_limit">
          <Citys ref="citys" title="限制地区" />
        </template>
      </div>
      <!-- 广告设置 -->
      <div class="flexrowbetween pt_10 borderb mt_42">
        <div class="c_000">广告设置</div>
        <div class="flex aligncenter">
          <el-button type="primary" size="small" @click="saveAdv" class="mr_10" >保存广告设置</el-button>
          <div class="c_primary commhover" v-if="sqtype4" @click="handleSq(4, 0)">
            收起 <i class="el-icon-caret-top f-18"></i>
          </div>
          <div class="c_primary commhover" v-else @click="handleSq(4, 1)">
            展开 <i class="el-icon-caret-bottom f-18"></i>
          </div>
        </div>
      </div>
      <div class="pl_20 pt_20" v-if="sqtype4">
        <el-form-item >
          <template slot="label">
            <span> <span class="circle">初</span> 开屏广告</span>
          </template>
          <el-radio-group v-model="advData[0].status">
            <el-radio
              v-for="(item, index) in statusList"
              :key="index"
              :label="item.id"
              >{{ item.name }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <div v-if="advData[0].status==1" class="pl_20">
          <el-form-item label="广告类型">
            <el-radio-group v-model="advData[0].data.adv_type" @change="changeStatus(0)">
              <el-radio :label="1">静态图</el-radio>
              <el-radio :label="2">动态图</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <div class="flex aligncenter mt_15">
              <div class="sloganbox bgbox flexcenter f-13 commhover">
                <img v-if="advData[0].data.url" :src="domain+advData[0].data.url" class="imgs" alt="">
                <span v-else>未设置</span>
                <div class="cover flexcolumn aligncenter justifycenter">
                  <input type="file" name="" accept="images/*" id="adv_kp" class="sloganimg commhover" @change="upload($event,'adv_kp')">
                  <span class="c_fff f-13">点击上传</span>
                  <span class="c_fff f-13">750 * 1664px</span>
                </div>
              </div>
              <div v-if="advData[0].data.url" class="commhover c_primary ml_20 f-15" @click="clearImg('adv_kp')">清除</div>
            </div>
          </el-form-item>
          <el-form-item label="是否限时">
            <el-radio-group v-model="advData[0].data.is_limit">
              <el-radio :label="1">
                是
                <template v-if="advData[0].data.is_limit">
                  <el-input
                    type="number"
                    v-model="advData[0].data.time"
                    size="small"
                    style="width: 100px"
                    class="pr_10 pl_10"
                    min="0"
                    max="100"
                    oninput="if(value > 100) value = 100; if(value < 0 || value == '' || value == null) value = 0;"
                  />
                  秒
                </template>
              </el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="强制观看">
            <el-radio-group v-model="advData[0].data.is_force">
              <el-radio
                v-for="(item, index) in statusList"
                :key="index"
                :label="item.id"
                >{{ item.name }}</el-radio
              >
            </el-radio-group>
            <div style="color: #c5c5c5">
              开启后只能等待广告展示完毕，无法点击‘跳过’按钮跳过广告
            </div>
          </el-form-item>
          <el-form-item label="跳转链接">
            <el-input v-model="advData[0].data.link" placeholder="默认放抽奖官网地址" />
          </el-form-item>
        </div>
        <el-form-item>
          <template slot="label">
            <span> <span class="circle yell">中</span> 底部广告</span>
          </template>
          <el-radio-group v-model="advData[1].status">
            <el-radio
              v-for="(item, index) in statusList"
              :key="index"
              :label="item.id"
              >{{ item.name }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <div v-if="advData[1].status==1" class="pl_20">
          <el-form-item label="广告类型">
            <el-radio-group v-model="advData[1].data.adv_type" @change="changeStatus(1)">
              <el-radio
                v-for="(item, index) in ggTypeList"
                :key="index"
                :label="item.id"
                >{{ item.name }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item label="上传素材">  
            <div class="flex aligncenter">
              <div class="sloganbox flexcenter f-13 commhover">
                <template v-if="advData[1].data.adv_type==1||advData[1].data.adv_type==2">
                  <img v-if="advData[1].data.url" :src="domain+advData[1].data.url" class="imgs" alt="">
                  <span v-else>未设置</span>
                </template>
                <template v-else>
                  <video v-if="advData[1].data.url" autoplay="autoplay" muted="muted" :src="domain+advData[1].data.url" width="100%" height="100%"></video>
                  <span v-else>未设置</span>
                </template>
                <div class="cover flexcolumn aligncenter justifycenter">
                  <input v-if="advData[1].data.adv_type==1||advData[1].data.adv_type==2" type="file" name="" accept="images/*" id="adv_bottom" class="sloganimg commhover" @change="upload($event,'adv_bottom')">
                  <input v-if="advData[1].data.adv_type==3||advData[1].data.adv_type==3" type="file" name="" accept="video/*" id="adv_bottom" class="sloganimg commhover" @change="uploadVideo($event,'adv_bottom')">
                  <span class="c_fff f-13">点击上传</span>
                  <span class="c_fff f-13">750 * 320px</span>
                </div>
              </div>
              <div v-if="advData[1].data.url" class="commhover c_primary ml_20 f-15" @click="clearImg('adv_bottom')">清除</div>
            </div>
          </el-form-item>
          <el-form-item label="跳转链接">
            <el-input v-model="advData[1].data.link" placeholder="默认放抽奖官网地址" />
          </el-form-item>
          <el-form-item label="是否限时">
            <el-radio-group v-model="advData[1].data.is_limit">
              <el-radio :label="1">
                是
                <template v-if="advData[1].data.is_limit">
                  <el-input
                    type="number"
                    v-model="advData[1].data.time"
                    size="small"
                    style="width: 100px"
                    class="pr_10 pl_10"
                    min="0"
                    max="100"
                    oninput="if(value > 100) value = 100; if(value < 0 || value == '' || value == null) value = 0;"
                  />
                  秒
                </template>
              </el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="强制观看">
            <el-radio-group v-model="advData[1].data.is_force">
              <el-radio
                v-for="(item, index) in statusList"
                :key="index"
                :label="item.id"
                >{{ item.name }}</el-radio
              >
            </el-radio-group>
            <div style="color: #c5c5c5">
              <!-- 开启后只能等待广告展示完毕，无法点击‘跳过’按钮跳过广告 -->
            </div>
          </el-form-item>
        </div>

        <!-- 弹窗广告 -->
        <el-form-item label="">
          <template slot="label">
            <span><span class="circle redc">高</span> 弹窗广告</span>
          </template>
          <el-radio-group v-model="advData[2].status">
            <el-radio
              v-for="(item, index) in statusList"
              :key="index"
              :label="item.id"
              >{{ item.name }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <div v-if="advData[2].status==1" class="pl_20">
          <el-form-item label="广告类型">
            <el-radio-group v-model="advData[2].data.adv_type" @change="changeStatus(2)">
              <el-radio
                v-for="(item, index) in ggTypeList"
                :key="index"
                :label="item.id"
                >{{ item.name }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item label="上传素材">
            <div class="flex aligncenter">
              <div class="sloganbox flexcenter f-13 commhover">
                <!-- <img v-if="advData[2].data.url" :src="domain+advData[2].data.url" class="imgs" alt="">
                <span v-else>未设置</span> -->
                <template v-if="advData[2].data.adv_type==1||advData[2].data.adv_type==2">
                  <img v-if="advData[2].data.url" :src="domain+advData[2].data.url" class="imgs" alt="">
                  <span v-else>未设置</span>
                </template>
                <template v-else>
                  <video v-if="advData[2].data.url" autoplay="autoplay" muted="muted" :src="domain+advData[2].data.url" width="100%" height="100%"></video>
                  <span v-else>未设置</span>
                </template>
                <div class="cover flexcolumn aligncenter justifycenter">
                  <input v-if="advData[2].data.adv_type==1||advData[2].data.adv_type==2" type="file" name="" accept="images/*" id="adv_tc" class="sloganimg commhover" @change="upload($event,'adv_tc')">
                  <input v-if="advData[2].data.adv_type==3" type="file" name="" accept="video/*" id="adv_bottom" class="sloganimg commhover" @change="uploadVideo($event,'adv_tc')">
                  <span class="c_fff f-13">点击上传</span>
                  <span class="c_fff f-13">750 * 320px</span>
                </div>
              </div>
              <div v-if="advData[2].data.url" class="commhover c_primary ml_20 f-15" @click="clearImg('adv_tc')">清除</div>
            </div>
          </el-form-item>
          <el-form-item label="跳转链接">
            <el-input v-model="advData[2].data.link" placeholder="默认放抽奖官网地址" />
          </el-form-item>
          <el-form-item label="是否限时">
            <el-radio-group v-model="advData[2].data.is_limit">
              <el-radio :label="1">
                是
                <template v-if="advData[2].data.is_limit">
                  <el-input
                    type="number"
                    v-model="advData[2].data.time"
                    size="small"
                    style="width: 100px"
                    class="pr_10 pl_10"
                    min="0"
                    max="100"
                    oninput="if(value > 100) value = 100; if(value < 0 || value == '' || value == null) value = 0;"
                  />
                  秒
                </template>
              </el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="强制观看">
            <el-radio-group v-model="advData[2].data.is_force">
              <el-radio
                v-for="(item, index) in statusList"
                :key="index"
                :label="item.id"
                >{{ item.name }}</el-radio
              >
            </el-radio-group>
            <div style="color: #c5c5c5">
              <!-- 开启后只能等待广告展示完毕，无法点击‘跳过’按钮跳过广告 -->
            </div>
          </el-form-item>
        </div>
      </div>
      <!-- 关注抽奖 -->
      <div class="flexrowbetween pt_10 borderb mt_42">
        <div class="c_000">关注抽奖</div>
        <div class="c_primary commhover" v-if="sqtype5" @click="handleSq(5, 0)">
          收起 <i class="el-icon-caret-top f-18"></i>
        </div>
        <div class="c_primary commhover" v-else @click="handleSq(5, 1)">
          展开 <i class="el-icon-caret-bottom f-18"></i>
        </div>
      </div>
      <div class="pl_20 pt_20" v-if="sqtype5">
        <el-form-item label="关注抽奖">
          <el-radio-group v-model="form.is_regard">
            <el-radio
              v-for="(item, index) in statusList"
              :key="index"
              :label="item.id"
              >{{ item.name }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <div class="flex aligncenter mb_22" v-if="form.is_regard">
          <div class="f-14 c_000 s_title">公众号二维码</div>
          <div class="flex aligncenter mt_15">
            <div class="sloganbox zfxbox flexcenter f-13 commhover">
              <img v-if="form.regard_data.qrcode" :src="domain+form.regard_data.qrcode" class="imgs" alt="">
              <span v-else>未设置</span>
              <div class="cover flexcolumn aligncenter justifycenter">
                <input type="file" name="" accept="images/*" id="sharecode" class="sloganimg commhover" @change="upload($event,'sharecode')">
                <span class="c_fff f-13">点击上传</span>
              </div>
            </div>
          </div>
          <div v-if="form.regard_data.qrcode" class="commhover c_primary ml_20 f-15" @click="clearImg('sharecode')">清除</div>
        </div>
        <el-form-item label="关注引导词" v-if="form.is_regard">
          <el-input  v-model="form.regard_data.text" :maxlength="20" placeholder="扫码后回复：抽奖" />
        </el-form-item>
      </div>
    </el-form>
    <el-button type="primary" @click="save">保存</el-button>
  </div>
</template>
<script>
import PfwComp from "./PfwComp.vue";
import { taskInfo, configEdit, advertSave, configSave } from '@/api/active'
import { uploadPhoto } from "@/api/comm";
import { isOverSize } from '@/utils/validate'
import { mapGetters, mapActions } from 'vuex'
import Citys from '@/components/Citys';

export default {
  data() {
    const equalToWin = (rule, value, callback) => {
      if (Number(value) > Number(this.form.win_num)) {
        callback(new Error("每人每项中奖次数不得大于每人抽奖总次数"));
      } else {
        callback();
      }
    };

    const equalToAll = (rule, value, callback) => {
      if (Number(value) > Number(this.form.all_num)) {
        // console.log('val',value, this.form.all_num)
        callback(new Error("每人每日抽奖获得次数不得大于每人抽奖总次数"));
      } else {
        callback();
      }
    };

    const equalToDay = (rule, value, callback) => {
      if (Number(value) < Number(this.form.user_day_num)) {
        callback(new Error("首次登录抽奖数不得低于每人每日抽奖获得次数"));
      } else {
        callback();
      }
    };

    return {
      status:0,
      statusList: [
        { name: "开启", id: 1 },
        { name: "关闭", id: 0 },
      ],
      fqlist: [
        { name: "关闭", id: '0' },
        { name: "12小时", id: '12' },
        { name: "24小时", id: '24' },
        { name: "48小时", id: '48' },
      ],
      ggTypeList: [
        { name: "静态图", id: 1 },
        { name: "动态图", id: 2 },
        { name: "视频", id: 3 },
      ],
      sqtype: 1,
      sqtype2: 1,
      sqtype3: 1,
      sqtype4: 1,
      sqtype5:1,
      form: {
        game_limit_num:'',
        num:'',
        all_num:'',
        day_num:'',
        win_num:'',
        one_win_num:'',
        user_day_num:'',
        is_task:'',
        empty_chance:'',
        is_safe:0,
        is_limit:0,
        limit_province:'',
        limit_city:'',
        limit_area:'测试',
        type:'',
        forward_num:'',
        forward_limit_num:'',
        advert_num:'',
        advert_limit_num:'',
        mode_data:{
          chance:'',
          time:''
        },
        is_regard:'',
        regard_data:{
          qrcode:'',
          text:''
        }
      },
      rules:{
        all_num:[
          { required: true, trigger: "blur", message: "请输入每人抽奖总次数" },
          // { required: true, validator: equalToPassword, trigger: "blur" }
        ],
        day_num:[{ required: true, trigger: "blur", message: "请输入每人每天抽奖次数" }],
        win_num:[{ required: true, trigger: "blur", message: "请输入每人中奖次数" }],
        // one_win_num:[{ required: true, trigger: "blur", message: "请输入每人每项中奖次数" }],
        one_win_num:[
          { required: true, trigger: "blur", message: "请输入每人每项中奖次数" },
          { required: true, validator: equalToWin, trigger: "blur" }
        ],
        num:[
          { required: true, trigger: "blur", message: "请输入首次登录抽奖次数" },
          { required: true, validator: equalToDay, trigger: "blur" }
        ],
        user_day_num:[
          { required: true, trigger: "blur", message: "请输入每人每日抽奖获得次数" },
          // { required: true, validator: equalToAll, trigger: "blur" }
        ],
        is_task:[{ required: true, trigger: "blur", message: "请选择获得额外机会" }],
      },
      advData:[
        {
          position:1,//开屏广告
          status: 0,
          data:{
            url:'',
            is_limit:0,
            time:'',
            adv_type:1,//广告类型
            link:'',
            is_force:0
          }
        },
        {
          position:2,//底部广告
          status: 0,
          data:{
            url:'',
            is_limit:0,
            time:'',
            adv_type:1,//广告类型
            link:'',//跳转类型
            is_force:0
          }
        },
        {
          position:3,//底部广告
          status: 0,
          data:{
            url:'',
            is_limit:0,
            time:'',
            adv_type:1,//广告类型
            link:'',//跳转类型
            is_force:0
          }
        },
      ],
      isRewirite:false,
      queryParams: {
        page: 1,
        num: 10,
      },
      total: 0,
      province:[],
      citys:[],
      region:[],
      peoperdisable:false
    };
  },
  computed: {
    ...mapGetters(["iframeUrl"]),
  },
  components: {
    PfwComp,Citys
  },
  props:{
    activeId:{
      default:''
    }
  },
  watch:{
    'form.all_num':function(newValue){
     // 监听form表单中callPoliceSort字段值的变化，变化了将需要清空的值进行清空
      console.log('newValue',newValue);
      if(newValue>0){
        this.peoperdisable = true
        this.form.user_day_num = 0
      }
      if(newValue==0 && this.form.day_num==0){
        this.peoperdisable = false
      }
    },
    'form.day_num':function(newValue){
     // 监听form表单中callPoliceSort字段值的变化，变化了将需要清空的值进行清空
      console.log('newValue',newValue);
      if(newValue>0){
        this.peoperdisable = true
        this.form.user_day_num = 0
      }
      if(newValue==0 && this.form.all_num==0){
        this.peoperdisable = false
      }
    }
  },
  created(){
    this.getInfo()
  },
  methods: {
    ...mapActions(["setUrl"]),

    getInfo(){
      taskInfo({id:this.activeId}).then(res=>{
        let data = res.data
        this.status = data.task.status
        this.form = data.config
        // this.form.limit_province = ''
        // this.form.limit_city = ''
        // this.form.limit_area = ''

        if(Array.isArray(data.config.mode_data)){
          this.form.mode_data = {
            chance:'',
            time:''
          }
        }
        if(Array.isArray(data.config.regard_data)){
          this.form.regard_data = {
            qrcode:'',
            text:''
          }
        }
        let advertData = data.advert
        let advArr = []
        advertData.forEach((item) => {
          let params = {
            position: item.position,
            status: item.status,
            data:{
              url:item.data.url||'',
              is_limit:item.data.is_limit?Number(item.data.is_limit):0,
              time:item.data.time||'',
              is_force:item.data.is_force?Number(item.data.is_force):0,
              adv_type: item.data.adv_type?Number(item.data.adv_type):1,//广告类型
              link:item.data.link||'',//跳转类型
            }
          }
          advArr.push(params)
        });
        this.advData = advArr
        console.log('广告设置：',this.advData)
        // this.info = data
        // this.form.id = data.task.id
        // this.form.float_url = data.setting.float_url
        // this.form.biaoti_url = data.setting.biaoti_url
        // this.form.bg_url = data.setting.bg_url
        // this.form.music_url = data.setting.music_url
        // this.form.is_share = data.setting.is_share
      })
    },
    
    handleEdit(e,index){
      console.log('11')
      let value = e.replace(/[^\d]/g, ""); // 只能输入数字
      value = value.replace(/^0+(\d)/, "$1"); // 第一位0开头，0后面为数字，则过滤掉，取后面的数字
      value = value.replace(/(\d{15})\d*/, '$1') // 最多保留15位整数
      this.advData[index].data.is_limit = value
    },

    handleSq(type, status) {
      if (type == 1) {
        this.sqtype = status;
      } else if (type == 2) {
        this.sqtype2 = status;
      } else if (type == 3) {
        this.sqtype3 = status;
      }else if (type == 4) {
        this.sqtype4 = status;
      }else if (type == 5) {
        this.sqtype5 = status;
      }
    },

    handlerChange(){
      this.isRewirite = true
    },

    changeStatus(index){
      this.advData[index].data.url = ''
    },

    focus(){
      this.isRewirite = false
    },

    changeInput(){
      if(this.isRewirite){
        this.save()
      }
    },

    upload(event,type){
      var file = event.currentTarget.files[0];
      console.log("file:", file, event);
      if (isOverSize(file.size, 5)) {
        this.$message.warning("图片大小不能超过5MB");
        return;
      }
      var formData = new FormData();
      formData.append("file", file);
      formData.append("type", type);
      uploadPhoto(formData).then((res) => {
        if(type == 'adv_kp'){ 
          this.advData[0].data.url = res.data;
        }else if(type == 'adv_bottom'){
          this.advData[1].data.url = res.data;
        }else if(type == 'adv_tc'){
          this.advData[2].data.url = res.data;
        }else if(type == 'sharecode'){
          this.form.regard_data.qrcode = res.data;
        }
        document.getElementById(type).value = null;
      });
    },

    uploadVideo(event,type){
      var file = event.currentTarget.files[0];
      console.log("file:", file, event);
      // if (isOverSize(file.size, 5)) {
      //   this.$message.warning("视频大小不能超过5MB");
      //   return;
      // }
      var formData = new FormData();
      formData.append("file", file);
      formData.append("type", type);
      uploadPhoto(formData).then((res) => {
        if(type == 'adv_kp'){ 
          this.advData[0].data.url = res.data;
        }else if(type == 'adv_bottom'){
          this.advData[1].data.url = res.data;
        }else if(type == 'adv_tc'){
          this.advData[2].data.url = res.data;
        }
        document.getElementById(type).value = null;
      })
    },

    clearImg(type){
      if(type == 'adv_kp'){ 
        this.advData[0].data.url = '';
      }else if(type == 'adv_bottom'){
        this.advData[1].data.url = '';
      }else if(type == 'adv_tc'){
        this.advData[2].data.url = '';
      }else if(type == 'sharecode'){
        this.form.regard_data.qrcode = '';
      }
      document.getElementById(type).value = null;
    },

    save(){
      this.$refs.ruleForm.validate(valid=>{
        if(!valid) return
        if(Number(this.form.one_win_num)>Number(this.form.win_num)){
          this.$message.warning('每人每项中奖次数不能大于每人中奖次数')
          return
        }
        // if(Number(this.form.user_day_num)>Number(this.form.all_num)){
        //   this.$message.warning('每人每日抽奖获得次数不能大于每人每人抽奖总次数')
        //   return
        // }
        // if(Number(this.form.num)<Number(this.form.user_day_num)){
        //   this.$message.warning('首次登录抽奖次数不能低于每人每日抽奖获得次数')
        //   return
        // }
        let params = {
          id:this.activeId,
          ...this.form
          // num:this.form.num,
          // all_num: this.form.all_num,
          // day_num: this.form.day_num,
          // win_num: this.form.win_num,
          // one_win_num: this.form.one_win_num,
          // is_task: this.form.is_task,
          // empty_chance:this.form.empty_chance,
          // is_safe: this.form.is_safe,
          // is_limit: this.form.is_limit,
          // type: this.form.type,
          // mode_data:{
          //   chance:this.form.chance,
          //   time: this.form.time
          // },
          // forward_num:this.form.forward_num,
          // forward_limit_num: this.form.forward_limit_num,
          // advert_num: this.form.advert_num,
          // advert_limit_num: this.form.advert_limit_num,
          // is_regard: this.form.is_regard,
          // regard_data:{
          //   qrcode: this.form.qrcode,
          //   text: this.form.text
          // }
        }
        if(this.status == 1){
          configSave(params).then(res=>{
            this.$message.success('编辑成功')
            this.saveAdv()
            this.getInfo()
          })
        }else{
          configEdit(params).then(res=>{
            this.$message.success('编辑成功')
            this.saveAdv()
            this.getInfo()
          })
        }
      })
    },

    saveAdv(){
      let params = {
        id: this.activeId,
        data:this.advData
      }
      advertSave(params).then(()=>{
        this.$message.success('广告设置成功')
        // 刷新
        this.setUrl(this.iframeUrl)
        this.getInfo()
      })
    },
  },
};
</script>
<style lang="scss" scoped>
.panel_h {
  height: calc(100vh - 239px);
  overflow-y: auto;
  padding-right: 12px;

  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
    background: #c1c1c1;
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
    border-radius: 10px;
    background: #ededed;
  }
}
.line {
  height: 82px;
}

.borderb {
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}
::v-deep label {
  font-weight: normal;
}
::v-deep .el-form-item__label {
  color: #000;
  font-size: 14px;
}
.sloganbox {
  width: 180px;
  height: 90px;
  background-color: #f5f5f5;
  border-radius: 4px;
  color: #555;
  position: relative;
  overflow: hidden;

  &:hover .cover {
    display: flex !important;
  }
  .imgs{
    width: 100%;
    height: 100%;
  }
  .sloganimg{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
  }
}
.bgbox {
  width: 120px;
  height: 210px;
}
.zfxbox{
  width: 120px;
  height: 120px;
}
.iconbox {
  width: 80px;
  height: 80px;
}
.s_title {
  width: 140px;
  // text-align: right;
  padding-right: 12px;
}
.cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
}
.musicitem {
  padding: 10px;
}
.bg {
  background-color: #f3f3f4;
}
.circle{
  display: inline-block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: #0076FF;
  color: white;
  line-height: 26px;
  text-align: center;
}
.yell{
  background-color: #FFC069;
}
.redc{
  background-color: #F5222D;
}
</style>